<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="form.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="7">
          <el-form ref="form" :model="form"  label-width="5.729vw">
            <el-form-item label="工地名称：">
              <el-select
                style="width: 220px"
                v-model="form.valuePointID"
                placeholder="请选择"
                filterable
                clearable
                @change="screeningData"
              >
                <el-option
                  v-for="item in selectPointData"
                  :key="item.PID"
                  :label="item.PointName"
                  :value="item.PointName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <!-- <el-button size="mini" type="success" @click="exportExcel">导 出</el-button> -->
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="form.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="7">
          <el-form ref="form" :model="form"  label-width="5.729vw">
            <el-form-item label="车辆所属公司：">
              <el-input
                v-model="form.valueCompanyName"
                placeholder="请输入车辆所属公司"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col> -->
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
      border
    >
      <el-table-column
        prop="PointName"
        label="工地名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LICENSE_PLATE"
        label="车辆名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ZTType"
        label="垃圾类型"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="WeightTime"
        label="时间"
        align="center"
      ></el-table-column>
      
      <el-table-column label="查看照片" width="150px" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 45px; height: 45px; margin-top: 5px"
            :src="scope.row.PhotoBig"
            @click="bigImage(scope.row)"
          >
            <div slot="error" class="image-slot" style="margin-top: 10px">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 图片放大 -->
    <el-dialog
     v-dialogDrag
      title="车牌识别图片"
      :visible.sync="showBigDialogVisible"
      width="22.646vw"
      height="22.646vw"
      :close-on-click-modal="false"
    >
      <img :src="itemImageSrc" style="height: 100%; width: 100%" alt="图片丢失了" />
      <div style="margin:10px; text-align:center">
      <el-button  type="primary" round   @click="setActiveItem(0)" > 1</el-button>
      <el-button  type="primary"  round   @click="setActiveItem(1)" > 2</el-button>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 20,    //    每页的数据
      form: {
        StartDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24* 365), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24), 'yyyy-MM-dd'),
        valuePointID: '',
        valueCompanyName: '',
      },
      loading: false,
      showBigDialogVisible: false,
      originalData: [],
      selectPointData: [],
      tableData: [],
      imageList: [],
      itemImageSrc: '',
    }
  },
  created () {
  },
  mounted () {
    this.getlistdata()
    this.getPointdata()
  },
  methods: {
    async getlistdata () {
      var url = 'Vehicle/GetInOutWeightInfoZT?Type=1'+ '&StartTime='
       + this.form.StartDate + '&EndTime=' + this.form.EndDate
        // + '&Vid='+ this.form.valuePointID
      const { data } = await this.$Http.get(url)
      // 原始数据
      this.originalData = data
      this.originalData.forEach(element => {
        element.arrImage = [element.PhotoBig, element.PhotoSmall]
      });
      this.screeningData()
    },
    
    async getPointdata () {
      var url = 'Vehicle/GetPointInfoZT?ClientNo=000&Name=&Type=1'
      const { data } = await this.$Http.get(url)
      this.selectPointData = data
    },
    // 导出Excel
    exportExcel () {
      let excelName = '进厂称重数据'
      const tHeader = ['车辆名称', '垃圾类型', '地磅称重', '地磅称重时间']
      const filterVal = ['车辆名称', '垃圾类型', '地磅称重', '地磅称重时间']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 放大图片
    bigImage (row) {
      this.imageList = row.arrImage
      if (this.imageList.length > 0) {
        this.itemImageSrc = this.imageList[0]
        this.showBigDialogVisible = true
      }
    },
    // 切换图片
    setActiveItem:function(index){
      if (index == 0) {
        this.itemImageSrc =this.imageList[0]
      }
      else if (index == 1) {
         this.itemImageSrc =this.imageList[1]
      }
      else if (index == 2) {
         this.itemImageSrc =this.imageList[2]
      }
    },
    
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData
      if(this.form.valuePointID) this.tableData = this.tableData.filter(item => item.PointName === this.form.valuePointID)
      if(this.form.valueCompanyName) this.tableData = this.tableData.filter(item => item.CompanyName.includes(this.form.valueCompanyName))
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
    
  
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 110px;
}

</style>